<template>
    <div class="page-box">
        <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
        <div class="app-container">
            <div class="filter-container">
                <el-form :inline="true" class="demo-form-inline" label-position="left" label-width="100px">
                    <el-form-item label="全网商机编号">
                        <el-input v-model="search.busiOpportunityCode" placeholder="请输入全网商机编号"></el-input>
                    </el-form-item>
                    <el-form-item label="全网项目编号">
                        <el-input v-model="search.groupProjectCode" placeholder="请输入全网项目编号"></el-input>
                    </el-form-item>
                    <el-form-item label="项目名称">
                        <el-input v-model="search.projectName" placeholder="请输入名称"></el-input>
                    </el-form-item>
                    <el-form-item label="归属地">
                        <el-select v-model="search.cityCode" placeholder="请选择" :disabled="disabled">
                            <el-option :label="item.label" :value="item.value" v-for="item, i in options"
                                :key="i"></el-option>
                        </el-select>
                    </el-form-item>
                    <!-- <el-form-item label="中标时间">
                        <el-date-picker v-model="search.zbTime" type="daterange" start-placeholder="开始日期"
                            format="yyyy-MM-dd" value-format="yyyy-MM-dd" end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item> -->
                    <el-form-item label="是否中标">
                        <el-select v-model="search.zbFlag" placeholder="请选择">
                            <el-option label="是" value="Y"></el-option>
                            <el-option label="否" value="N"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否省级支撑">
                        <el-select v-model="search.zcFlag" placeholder="请选择">
                            <el-option label="是" value="Y"></el-option>
                            <el-option label="否" value="N"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                        <el-button @click="reset">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit style="width: 100%;"
                :height="height + 'px'">
                <el-table-column label="归属地市" align="center" v-element-table-tooltip>
                    <template slot-scope="{row}">
                        <span>{{ row.cityName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="归属区县" align="center" v-element-table-tooltip>
                    <template slot-scope="{row}">
                        <span>{{ row.publicCountyCode }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="项目名称" align="center" v-element-table-tooltip>
                    <template slot-scope="{row}">
                        <span>{{ row.projectName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="客户名称" align="center" v-element-table-tooltip>
                    <template slot-scope="{row}">
                        <span>{{ base64Decode(row.groupCustomerName) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="全网商机编号" align="center" v-element-table-tooltip>
                    <template slot-scope="{row}">
                        <span>{{ row.busiOpportunityCode }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="全网项目编码" align="center" v-element-table-tooltip>
                    <template slot-scope="{row}">
                        <span>{{ row.groupProjectCode }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="所属行业" align="center" v-element-table-tooltip>
                    <template slot-scope="{row}">
                        <span>{{ projectIndustrycounty[row.industrycounty || '11'] }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="是否中标" align="center" v-element-table-tooltip width="80px">
                    <template slot-scope="{row}">
                        <span>{{ row.zbFlag == 'Y' ? '是' : '否' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="中标单位类型" align="center" v-element-table-tooltip>
                    <template slot-scope="{row}">
                        <span>{{ row.zbType }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="是否省级参与支撑" align="center" v-element-table-tooltip width="140">
                    <template slot-scope="{row}">
                        <span>{{ row.zcFlag == 'Y' ? '是' : '否' }}</span>
                    </template>
                </el-table-column>s
                <el-table-column label="中标金额(万元)" align="center" v-element-table-tooltip>
                    <template slot-scope="{row}">
                        <span>{{ getNumW(row.bidAmount || 0) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="发标时间" align="center" v-element-table-tooltip>
                    <template slot-scope="{row}">
                        <span>{{ row.collectionDate }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="开标时间" align="center" v-element-table-tooltip>
                    <template slot-scope="{row}">
                        <span>{{ row.bidOpenDate }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="中标时间" align="center" v-element-table-tooltip>
                    <template slot-scope="{row}">
                        <span>{{ row.zbTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="60px">
                    <template slot-scope="{row}">
                        <el-button @click="goDetail(row)" type="text">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" :page.sync="pagination.pageNum"
                :limit.sync="pagination.pageSize" @pagination="getPagination" />
        </div>
    </div>
</template>

<script>
import { getThreeHundred } from '@/api/api'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import Breadcrumb from '@/components/Breadcrumb'
import moment from 'moment'
let query;
export default {
    name: 'mgrThreeTable',
    components: { Breadcrumb, Pagination },
    data() {
        return {
            disabled: sessionStorage.getItem('orgCode') !== '10008',
            height: 600,
            tableKey: 0,
            list: null,
            total: 0,
            listLoading: true,
            search: {},
            projectIndustrycounty: {
                '1': '医疗',
                '2': '教育',
                '3': '金融',
                '4': '交通',
                '5': '商客',
                '6': '工业能源',
                '7': '融合创新',
                '8': '党政军',
                '9': '互联网',
                '10': '农业文旅',
                '11': '未知',
            },
            options: [{
                value: '10197',
                label: '省政企'
            }, {
                value: '30182',
                label: '哈尔滨市‌'
            }, {
                value: '30183',
                label: '齐齐哈尔市'
            }, {
                value: '30184',
                label: '牡丹江市'
            }, {
                value: '30185',
                label: '佳木斯市'
            }, {
                value: '30186',
                label: '大庆市'
            }, {
                value: '30187',
                label: '伊春市‌'
            }, {
                value: '30188',
                label: '鸡西市‌'
            }, {
                value: '30189',
                label: '鹤岗市‌'
            }, {
                value: '30190',
                label: '双鸭山市'
            }, {
                value: '30191',
                label: '‌七台河市‌'
            }, {
                value: '30192',
                label: '绥化市‌'
            }, {
                value: '30193',
                label: '黑河市‌'
            }, {
                value: '30194',
                label: '大兴安岭'
            }],
            pagination: {
                "pageNum": 1,
                "pageSize": 20
            },
        }
    },
    created() {
        query = this.$route.query;
        if (query.yearFilter && query.yearFilter != 'all') {
            if (query.yearFilter === String(new Date().getFullYear())) {
                this.search = { ...query, zbTime: [query.yearFilter + '-01-01', moment().format('YYYY-MM-DD')] };
            } else {
                this.search = { ...query, zbTime: [query.yearFilter + '-01-01', query.yearFilter + '-12-31'] };
            }
        } else {
            this.search = { ...query };
        }
        this.getList();
        this.height = this.getHeight();
        let that = this;
        window.onresize = function (event) {
            that.height = that.getHeight();
        };
    },
    methods: {
        // base64解密
        base64Decode(base64String) {
            try {
                // 将Base64字符串转换为Uint8Array
                const binaryString = atob(base64String); // 注意：这里使用了atob，但在现代浏览器中，你也可以直接使用Uint8Array的构造函数来处理Base64字符串
                const bytes = new Uint8Array(binaryString.length);
                for (let i = 0; i < binaryString.length; i++) {
                    bytes[i] = binaryString.charCodeAt(i);
                }
                // 使用TextDecoder解码Uint8Array到字符串
                const decoder = new TextDecoder();
                return decoder.decode(bytes);
            } catch (error) {}
        },
        getHeight() {
            let winHieght = window.innerHeight;
            return winHieght - 240;
        },
        getPagination(pagination) {
            this.pagination = pagination;
            this.getList();
        },
        goDetail(row) {
            window.top.postMessage(
                JSON.stringify({
                    to: 'portal',
                    action: 'open',
                    pathname: `/iframe/PROJECT_MENU_MY_PROJECT_PROJECTFULLVIEW?uniqueProjectInstId=${row.UniqueProjectInstId}&bupMenuNo=${row.bupMenuNo}&tableRecord=${row.tableRecord}`,
                }),
                '*'
            )
        },
        onSubmit() {
            this.pagination = {
                "pageNum": 1,
                "pageSize": 20
            }
            this.getList();
        },
        reset() {
            this.pagination = {
                "pageNum": 1,
                "pageSize": 20
            }
            this.search = { ...query };
            this.getList();
        },
        getNumW(num) {
            return this.truncateToFixed(num / 10000, 2)
        },
        truncateToFixed(value, decimals) {
            const integerPart = Math.trunc(value); // 获取整数部分
            const decimalPart = value - integerPart; // 获取小数部分
            const factor = Math.pow(10, decimals);
            const truncatedDecimalPart = decimalPart < 0 ? Math.ceil(decimalPart * factor) / factor : Math.floor(decimalPart * factor) / factor; // 根据正负选择向上或向下截断
            return integerPart + truncatedDecimalPart; // 组合整数部分和小数部分
        },
        getList() {
            this.listLoading = true;
            try {
                let city = this.options.find(item => item.value == this.search.cityCode);
                let cityName = city?.label || '';
                let param = {
                    "hundred": {
                        "busiOpportunityCode": this.search.busiOpportunityCode || '',
                        "groupProjectCode": this.search.groupProjectCode || '',
                        "projectName": this.search.projectName || '',
                        cityName,
                        "zbBeginTime": this.search.zbTime && this.search.zbTime[0] ? this.search.zbTime[0] : '',
                        "zbEndTime": this.search.zbTime && this.search.zbTime[1] ? this.search.zbTime[1] : '',
                        "zbFlag": this.search.zbFlag || '',
                        "zcFlag": this.search.zcFlag || '',

                    },
                    "pageRequest": {
                        ...this.pagination
                    }
                }
                if (this.search.cityCode) {
                    param.cityCode = this.search.cityCode
                } else {
                    param.provinceCode = "10008"
                }
                getThreeHundred(param).then(response => {
                    this.list = response.list || []
                    this.total = response.total || 0
                    this.listLoading = false
                })
            } catch (error) {
                console.log('error', error)
                this.listLoading = false
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.page-box {
    background: #fff;
}

::v-deep .el-form-item {
    margin-bottom: 10px;
    margin-right: 20px;
}

::v-deep .el-table th {
    color: #000;
}

::v-deep .el-select--medium {
    min-width: 240px;
}

::v-deep .el-form-item--medium .el-form-item__content {
    min-width: 240px;
}

::v-deep .el-date-editor--daterange.el-input__inner {
    width: 240px;
}

::v-deep .el-select {
    width: 100%;
}
</style>